<template>
    <div>
        <div class="footer">
            <span>
                <input type="checkbox" v-model="all">
                全选
            </span>

            <span>已完成数量{{ done }}</span>/
            <span>全部数量{{ this.list.length }}</span>
        </div>
    </div>
</template>

<script>
export default {
 
    props: ['list'],
    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
    computed: {
        // 已完成的数量
        done() {

            return this.list.filter(item => {
                return item.checked
            }).length
        },
        all: {
            get() {
                if (this.list.length) {
                    return this.list.every(item => {
                        return item.checked
                    })
                }

            },
            set(val) {
                this.$emit('set', val)
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.footer {
    margin-left: 40px;
}
</style>